
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js" charset="UTF-8"></script>
</head>
<body>

<form id="formData" class="layui-form layui-form-pane" lay-filter="formData" style="display: none">
    <input type="text" name="id" hidden>
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input type="text" name="staffId" placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">员工姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="staffName" placeholder="请输入员工姓名" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-inline">
            <input type="text" name="phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">身份证号</label>
        <div class="layui-input-inline">
            <input type="text" name="idCard" placeholder="请输入身份证号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-inline">
            <input type="text" name="address" placeholder="请输入地址" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">离职时间</label>
        <div class="layui-input-inline">
            <input type="date" name="resignedTime" placeholder="离职时间" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">职位</label>
        <div class="layui-input-block">
            <select name="roleId" id="roleIdSelect" lay-filter="type">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所属部门</label>
        <div class="layui-input-block">
            <select name="deptid" id="deptidSelect" lay-filter="type">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="*">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<div class="demoTable">
    <div class="layui-inline">
        <input class="layui-input" placeholder="请输入员工姓名" name="staffName" id="staffName" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload" id="search">搜索</button>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="delCheck">批量删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="addbook">新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>
<!--数据表格右侧按钮组-->
<script type="text/html" id="barDemo">
    {{#  if(d.status == 1){ }}
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
        <button class='layui-btn layui-btn-xs layui-btn-danger' lay-event="sj">离职</button>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </div>
    {{#  } else { }}
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
        <button class='layui-btn layui-btn-xs layui-btn-normal' lay-event="sj">启用</button>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </div>
    {{#  } }}
</script>

</body>
<script>
    layui.use(['table','jquery','layer','form'], function(){
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        //页面加载完成后执行的事件
        $(function (){
            //当页面加载完成时先调用showTable()函数
            showTable();
            aaa();
            bbb();
        })
        //页面加载完成时，填充书籍类型的下拉框
        function aaa(){
            $.ajax({
                type:'get',
                url:'${pageContext.request.contextPath}/staff/getAllDept',
                dataType:'json',
                success:function (deptData){
                    var op="";
                    for (var i=0;i<deptData.length;i++){
                        //alert(typeData[i].typename)
                        $("#deptidSelect").append(
                            $("<option>").attr("value",deptData[i].deptid).html(deptData[i].dname)
                        )
                        //op+= "<option value='"+typeData[i].typeid+"'>"+typeData[i].typename+"</option>"
                    }
                    //$("#typeSelect").html(op);
                    form.render('select','formData'); //刷新select选择框渲染
                }
            })
        }
        function bbb(){
            $.ajax({
                type:'get',
                url:'${pageContext.request.contextPath}/staff/getAllRole',
                dataType:'json',
                success:function (roleData){
                    for (var i=0;i<roleData.length;i++){
                        $("#roleIdSelect").append(
                            $("<option>").attr("value",roleData[i].rid).html(roleData[i].rname)
                        )
                    }
                    form.render('select','formData'); //刷新select选择框渲染
                }
            })
        }

        //封装加载数据表格的方法
        function showTable(){
            table.render({
                elem: '#test'
                ,url:'/staff/getStaff'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,title: '用户数据表'
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'id', title:'ID',  fixed: 'left',hide:true, unresize: true, sort: true}
                    ,{field:'staffId' , title:'用户名', sort: true}
                    ,{field:'staffName', title:'员工姓名', sort: true}
                    ,{field:'password', title:'用户密码'}
                    ,{field:'phone', title:'手机号'}
                    ,{field:'idCard', title:'身份证号',  sort: true}
                    ,{field:'address', title:'地址',  sort: true}
                    //,{field:'createdTime', title:'入职时间',  sort: true}
                    ,{field:'createdTime', title:'离职时间',  sort: true}
                    ,{field:'status', title:'状态',  sort: true,templet: function(d){
                            if (d.status==0){
                                return "<button class='layui-btn layui-btn-xs layui-btn-danger'>离职</button>";
                            }else{
                                return "<button class='layui-btn layui-btn-xs layui-btn-normal'>启用</button>";
                            }
                        }}
                    ,{field:'roleId', title:'角色编号',hide:true}
                    ,{field:'deptid', title:'部门编号',hide:true}
                    ,{field:'rname', title:'员工职位',width:120}
                    ,{field:'dname', title:'所属部门',width:120}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
                ]]
                ,page: true
                ,limit:5
                ,limits:[3,5,10,15]
            });
        }

        /**
         * 监听新增/修改书籍信息的表单提交
         */
        form.on('submit(*)', function(data){
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/staff/insertLeaveStaff',
                dataType: 'json',
                data:data.field,
                success:function (result){
                    layer.closeAll();
                    if (result !=null ){
                        layer.msg(result.msg)
                        showTable();
                    }else{
                        layer.msg(result.msg)
                    }
                }
            })
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        $("#search").click(function (){
            //执行重载
            table.reload('test', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    staffName: $("#staffName").val()
                }
            });
        });
        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'delCheck':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'addbook':
                    //打开弹框前先清空表单
                    $("#formData")[0].reset();
                    layer.open({
                        type: 1 //此处以iframe举例
                        ,title: '新增书籍'
                        ,maxmin: true
                        ,offset: '100px'
                        ,area:['380px','360px']
                        ,content: $("#formData")
                    });
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                //alert(data.bookname);
                layer.confirm('真的删除行么', function(index){
                    $.post('${pageContext.request.contextPath}/staff//delById',{"id":data.id},function (delobj){
                        if (delobj.code==1){
                            //alert(delobj.msg);
                            layer.msg(delobj.msg, {icon: 1});
                            showTable();
                        }else {
                            layer.msg(delobj.msg, {icon: 5});
                        }
                    },'json')
                    layer.closeAll();
                });
            } else if(obj.event === 'edit'){
                $("#formData")[0].reset();
                layer.open({
                    type: 1 //此处以iframe举例
                    ,title: '新增员工'
                    ,maxmin: true
                    ,offset: '100px'
                    ,area:['380px','360px']
                    ,content: $("#formData")
                });
                //填充选中行数据到指定表单
                form.val('formData', data);
            }else if(obj.event === 'sj'){
                $.get('${pageContext.request.contextPath}/staff/updateStatus',{"status":data.status,"id":data.id},function (result){
                    /* if (result!=null){
                         layer.closeAll();
                         showTable();
                         layer.msg("成功");
                     }*/
                    if (result.code == 200){
                        showTable();
                        layer.msg(result.msg);
                    }else{
                        showTable();
                        layer.msg(result.msg);
                    }
                },'json')
            }
        });
    });
</script>
</html>
